@import './base/fn.less';
@radioPrefixCls: oreo-radio;
.@{radioPrefixCls} {
    position: relative; // background-color: @fill-base;
    padding: 0 16px; // font-size: 20px;
    &__wrap {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 11px 0;
    }
    &_checked {
        .@{radioPrefixCls}__icon {
            // background-color: @fill-base;
            color: @brand-primary;
            &:before {
                content: "\E003";
            }
        }
    }
   
    &_circle {
        .@{radioPrefixCls}__icon {
            // border-radius: 2px;
            background-color: @fill-base;
            border-radius: 50%;
            border: 1px solid @brand-primary;
            color: @brand-primary;
        }
        &.@{radioPrefixCls}_checked {
            .@{radioPrefixCls}__icon {
               
                &:before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 50%;
                    height: 50%;
                    transform: translate(-50%, -50%);
                    background-color: currentColor;
                    border-radius: 100%;
                }
            }
        }
    }
    &_disabled {
        .@{radioPrefixCls}__icon {
            // background-color: @fill-disabled;
            border-color: darken(@fill-disabled, 10%);
            color: darken(@fill-disabled, 10%);
        }
        .@{radioPrefixCls}__label {
            color: darken(@fill-disabled, 10%);
        }
    }
    &__icon {
        position: relative;
        width: 1em;
        height: 1em;
        font-size: 22px;
        margin-right: .42em;
        line-height: 1;
         // border-radius: 50%;
        // border: 1px solid @brand-primary;
        &:before {
            content: ''
        }
    }
    &__icon_right {
        position: absolute;
        right: 0;
        margin-right: 0;
    }
    &__input {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    &__label {
            // 目的：label 带链接,可以点透
            a {
                position: relative;
                z-index: 1;
            }
    }
}

.@{radioPrefixCls}-group {
    background-color: @fill-base;
    margin-top: 35px;
    .@{radioPrefixCls} {
        &:not(:last-child) {
            .@{radioPrefixCls}__wrap:after {
                .setBottomLine();
            }
        }
    }
}

.@{radioPrefixCls}_active {
    background: @fill-tap;
}